<script setup lang="ts">
import { useSubmit } from '@/views/user/use/use-submit';
import { trimBlank } from '@vc/utils';
import message from 'vc/src/common/message';
import { useUserStore } from '../../../store/modules/user';
import { bindEmail, updatePhone } from '../apis/profile';
import { LoginTabEnum, pageCfg } from '../config';
import type { FormInstance } from 'element-plus';
import Email from '../components/email.vue';
import PhoneCode from '../components/phone-code.vue';
import { useErrorMess } from '../use';

interface Props {
  showDialog: boolean;
  isEdit: boolean;
}

const { isEdit } = defineProps<Props>();
const userStore = useUserStore();
const emit = defineEmits(['cancel', 'update:showDialog']);

// 表单数据
const formData = reactive({
  account: '',
  verifyCode: ''
});

const ruleFormRef = ref<FormInstance>();

const errMess = reactive({
  pwd: '',
  code: '',
  account: ''
});

const { run, loading } = useRequest(bindEmail, {
  manual: true
});

const { cleanMess, handleError } = useErrorMess(errMess);

/** 提交 */
const handleSubmit = async() => {
  await ruleFormRef.value!.validate(async(valid) => {
    if (valid) {
      cleanMess();
      run({
        smsVerifyCode: formData.verifyCode,
        email: trimBlank(formData.account, 'all')
      }).then((res) => {
        if (res.code === 200 && res.data) {
          message.success(isEdit ? '修改成功' : '绑定成功');
          userStore.setUserInfo({
            ...userStore.getUserInfo,
            email: trimBlank(formData.account, 'all')
          });
          close();
        } else {
          handleError(res);
        }
      })
      .catch((error) => {
        handleError(error);
      });
    }
  });
};

function close () {
  emit('update:showDialog', false);
}
</script>

<template>
  <vc-dialog :title="isEdit ? '修改邮箱' : '绑定邮箱'" :modelValue="showDialog" @close="close"
    :height="300" :width="500">
    <div class="content">
      <div v-if="isEdit" class="text-14px mb-25px">
        <span class="text-[#666666] w-100px inline-block">当前邮箱账号</span>
        <span class="text-[#242934]">{{ userStore.getUserInfo.email }}</span>
      </div>
      <span v-else class="text-14px mb-15px block text-[#242934]">
        请输入邮箱账号
      </span>
      <el-form ref="ruleFormRef" :model="formData" @keypress.enter="handleSubmit">
        <!--account-->
        <email class="email-input" v-model:account="formData.account" :placeholder="pageCfg.emailPlaceholder"
          v-model:errorMess="errMess.account" />
        <!--code-->
        <phone-code isEmail :phone="formData.account" :form="ruleFormRef" 
          v-model:verifyCode="formData.verifyCode"
          v-model:errorMess="errMess.code" v-model:errorAccountMess="errMess.account"
          smsType="email" />
        <!--submit-->
        <el-form-item class="fr">
          <el-button class="change-color" @click="close()">取消</el-button>
          <el-button :loading="loading" type="primary" color="#02C680" style="color:#FFFFFF;" @click="handleSubmit">确认</el-button>
        </el-form-item>
      </el-form>
    </div>
  </vc-dialog>
</template>

<style lang="scss" scoped>
.content {
  padding: 20px;

  :deep(.email-input) {
    .vc-input {
      width: 100%;
    }
  }
  :deep(.change-color){
    &:hover{
      color: #02C680;
      background-color: rgba(231,247,243,0.3);
      border-color: #02C680;
    }
    &:focus{
      color: #02C680;
      background-color: rgba(231,247,243,0.3);
      border-color: #02C680;
    }
  }
}
:deep(.content){
  .vc-input__inner{
    padding-left: 16px;
  }
}
</style>
